<!DOCTYPE html>
<%@ include file="../base.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>加油记录</title>
<link rel="stylesheet" href="${ctx}/assets/css/reset.css?v=1.0.1" />
<link rel="stylesheet" href="${ctx}/assets/css/pullToRefresh.css?v=1.0.1" />
<script src="${ctx}/assets/js/iscroll.js?v=1.0.1"></script>
<script src="${ctx}/assets/js/pullToRefresh.js?v=1.0.1"></script>
<%@ include file="../js.jsp"%>
</head>
<body ontouchstart>
	<input type="hidden" id="rowCount" value="${pageView.rowCount }">
	<div class="bd" id="wrapper">
        <ul id="thelist" class="weui_cells">
        	<c:if test="page == null">
        		<li class='weui_cell'><p class="data-end">没有更多数据</p></li>
        	</c:if>
        	 <c:forEach var="fuellingData" items="${page.records}">
                    <li class="weui_cell">
	  	              	<div class="weui_cell_bd weui_cell_primary">
	                         <p>${fuellingData.stationName}
		                         <span class="record-info">${fuellingData.prName}<span class="record-price">${fuellingData.receivableAmount}</span>（实付${fuellingData.realincomeAmount}）</span>
	                         </p>
	                     </div>
	                     <div class="weui_cell_ft">
	                        <p class="small-font">${fuellingData.createdTime}
		                          <span class="display-block">
		                          	${fuellingData.paidTypeName}
								</span>
                          	</p>
                        </div>
                    </li>
    		</c:forEach>
        </ul>
    </div>
	
<script type="text/javascript">
	var pageNo=2;
	var pageSize=10;
	var pageCount=0;

	$(function(){
		getCnt();
	});
		
	function getCnt() {
		$.ajax({
	  	      type: "POST",
	  	      url: "${ctx}/fuellingData/cnt",
	  	      data: {pageNo:pageNo,pageSize:pageSize},
	  	      success: function(data){
	  	    	pageCount = data.pageCount;
	  	      }
	  	   });
	}
</script>

<script>
    refresher.init({
        id: "wrapper",
        pullDownAction: Refresh,
        pullUpAction: Load
    });
    
    function Refresh() {
        setTimeout(function () {
        	wrapper.refresh();
        }, 1000);

    }

    function Load() {
        setTimeout(function () {
        	var el, li, i;
            el = document.querySelector("#wrapper ul");
        	if(pageCount<pageNo){
        		if(pageCount==pageNo-1){
        			var $ul = $("#wrapper ul");             	
	              	var $htmlLi = $("<li class='weui_cell'><p class=\"data-end\">没有更多数据</p></li>"); 
	              	$ul.append($htmlLi);
	              	pageNo++;
        		}
            	wrapper.refresh();
    			return;
    		}
	       	$.ajax({
	 	  	      type: "POST",
	 	  	      url: "${ctx}/fuellingData/list",
	 	  	      data: {pageNo:pageNo,pageSize:pageSize},
	 	  	      success: function(data){
	 	  	    	  if(data.code == 200){
	 	  	    		$.each(data.records, function(name, value) {
	 	  	    			/* result = 
	 		                     " <div class=\"weui_cell_bd weui_cell_primary\">"+
	 		                         "<p>"+this.stationName+
	 		                         " <span class=\"record-info\">"+this.prName+
	 		                         "<span class=\"record-price\">"+this.receivableAmount+
	 		                         "</span>（实付"+this.realincomeAmount+"）</span>"+
	 		                         "</p>"+
	 		                     "</div>"+
	 		                     "<div class=\"weui_cell_ft\">"+
	 		                        " <p class=\"small-font\">"+this.createdTime+
	 		                          "<span class=\"display-block\">"+paidType(this.paidTypeId)+
	 		                          "</span>"+
	 		                         "</p>"+
	 		                     "</div>";
		  	  	    		li = document.createElement('li');
		  	  	    		li.className += 'weui_cell';
		  	                li.innerHTML=result;
		  	              	el.appendChild(li, el.childNodes[0]); */
		  	              var $resultLi = "<li class=\"weui_cell\">"+
			  	              	"<div class=\"weui_cell_bd weui_cell_primary\">"+
		                         "<p>"+this.stationName+
			                         " <span class=\"record-info\">"+this.prName+
			                         "<span class=\"record-price\">"+this.receivableAmount+
			                         "</span>（实付"+this.realincomeAmount+"）</span>"+
			                         "</p>"+
			                     "</div>"+
			                     "<div class=\"weui_cell_ft\">"+
			                        " <p class=\"small-font\">"+this.createdTime+
			                          "<span class=\"display-block\">"+this.paidTypeName+
			                          "</span>"+
			                         "</p>"+
			                     "</div>"+
		                     "</li>";
	 	  	    			var $ul = $("#wrapper ul");             	
	 		              	$ul.append($resultLi);
	 	  	    			wrapper.refresh();
	 	  	    		});
	 	  	    		pageNo++;
	 	  	    	  }else{
	 		  	        alert("加油站列表加载失败！");
	 	  	    	  }
	 	  	      }
	 	  	   });
        }, 1000);
    }
</script>

</body>
</html>